昨天我們將 Extension 裝到 Chrome 了，但我們應該也發現，如果每次一個小變動就要 build 一次，那要開發到何年何月呢？

所以我們來調整一下，讓我們開發環境更順手吧！

目標

在開發的環境下，直接同步更新到 Extension 中

WHY

直接 npm run dev 之後，將產生的 dist 目錄載入 Extension 後會遇到以下錯誤。

這是因為開發遇到了 CROS 政策問題，我們需要調整 vite.config.js 設定，讓它在開發的環境下可以同意使用。

HOW

1. 打開 terminal 輸入指令

   npm run dev
   

2. 查看開發環境下的網頁連結，假設如下

   ➜  Local:   http://localhost:5170/
   

3. 至 vite.config.js 中新增 server

   export default defineConfig({
      plugins: [
        vue(),
        tailwindcss(),
        crx({
          manifest
        })
      ],
      //新增這段
      server: {
        cors: true,
        origin: 'http://localhost:5170',
      },
    })
   

4. 存檔後，點選"重新整理"
   
5. 至 Extension 點擊 icon 就可以順利打開囉！
6. 接著可以嘗試修改畫面中的文字並存檔，再點擊 Extension icon 看看有沒有同步更新成功哦~

💡: 那個錯誤訊息不會自動清除，可以手動點進去按下"垃圾桶"，就可以清掉了~

Note

要注意的是，這個方法在開發上很方便，但是當我們把 terminal 關掉後，Extension 就會無法正常顯示，所以開發完成後，還是必須要下 build 指令，才可以得到一個成熟穩重(?)獨立的 Extension 哦~